<template>
  <chartTemplate
    :option="option"
    ref="chart"
    class="chart"
    :height="height"
  ></chartTemplate>
</template>
<script>
import chartTemplate from '@/assets/js/common/chartTemplatePlugin/chartTemplate.vue'
export default {
  name: 'singleLine',
  components: { chartTemplate },
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {
          data: [],
          xUnit: '月',
          yUnit: '万'
        }
      }
    },
    height: { type: Number, default: () => 300 }
  },
  computed: {},
  data() {
    return {
      lineColor: ['rgba(9, 109, 217, 0.8)', 'rgba(9, 109, 217, 0.8)'],
      areaColor: ['rgba(9, 109, 217, 0)', 'rgba(9, 109, 217, 0.1)'],
      seriesData: [],
      xAxisData: [],
      chart: null,
      option: {}
    }
  },
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {
      this.handleData()
      this.option = this.getOption()
      let tl = new TimelineMax({})
      tl.addLabel('start').add(this.$refs.chart.init(), 'start+=0.1')
      return tl
    },
    getOption() {
      let option = {
        grid: {
          top: 30,
          bottom: 25
        },
        tooltip: {
          backgroundColor: 'rgba(17,95,234,0)',
          trigger: 'axis',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(17,95,234,0)'
            }
          },
          className: 'line-hover-bg',
          position: (point, params, dom, rect, size) => {
            return [point[0], 30]
          },
          formatter: (params) => {
            let dom = `
          <div class="H_Regular" style='position: absolute;left:20px;top:20px'>${params[0].name}${this.chartData.xUnit}</div>
          <div class="D-DIN-Bold"  style='position: absolute;left:20px;top:40px;font-size: 16px;'>${params[0].value}%</div>
         `
            return dom
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#f0f0f0'
          },
          data: this.xAxisData,
          axisTick: {
            show: false
          },
          axisLine: { show: false },
          name: this.chartData.xUnit,
          boundaryGap: false,
          nameLocation: 'end',
          nameTextStyle: {
            color: '#f0f0f0',
            verticalAlign: 'top',
            padding: [8, 0, 0, 10]
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: { show: false },
          axisLabel: {
            color: 'rgba(240,240, 240, .7)',
            formatter: '{value} %'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },

          nameTextStyle: {
            align: 'center',
            color: 'rgba(240,240, 240, .7)'
          }
        },
        series: [
          {
            type: 'line',
            smooth: true,
            symbolSize: 0,
            lineStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: this.lineColor[0]
                  },
                  {
                    offset: 0.5,
                    color: this.lineColor[1]
                  },
                  {
                    offset: 1,
                    color: this.lineColor[0]
                  }
                ],
                false
              )
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: this.areaColor[0]
                  },
                  {
                    offset: 1,
                    color: this.areaColor[1]
                  }
                ],
                false
              )
            },
            data: this.seriesData
          }
        ]
      }
      return option
    },
    handleData() {
      let [_xAxis, _series, _legend] = [[], [], []]
      _series = this.chartData.data.map((item) => {
        return item.value
      })
      _xAxis = this.chartData.data.map((item) => {
        return item.year
      })
      this.seriesData = _series
      this.xAxisData = _xAxis
    }
  }
}
</script>
<style lang="scss">
.line-hover-bg {
  position: absolute;
  width: 89px;
  height: 200px;
  background: url('../../assets/imgs/project-img/line/hover-bg.png') no-repeat;
  background-size: contain;
  display: none;
  border: 0 none;
  box-shadow: rgb(0 0 0 / 0%) 1px 2px 10px !important;
}
</style>
